define(function(require){
    'use strict';

    var
        _ = require('underscore'),
        RS = require('core/reqres'),
        NC = require('core/event'),
        Marionette = require('marionette'),
        Utils = require('core/utils');

    var template = require('text!components/image/2.0.0/templates/layout.html'),
        ImageView = require('components/image/2.0.0/views/image'),
        IconView = require('components/image/2.0.0/views/icon'),
        UploadView = require('components/image/2.0.0/views/upload');
    var DEFAULTS_OPTIONS = {
            // 是否可以多选
            multiChoose: true,
            // 是否可以多张图一起上传
            multiUpload: true,
            // 只显示上传的Tab
            onlyUpload: false,
            // 默认打开哪个Tab
            tabActive: 'image',
            // 限制图片大小
            maxSize: 1024,
            // 隐藏下载网络图片
            hideDownload: false,
            // 图片上传地址
            uploadURL: _global.url.www + '/common/qiniu/upToken',
            // 上传到私有域还是公有域
            'private': false,
            // 回调
            callback: function() {}
        };

    return Marionette.Layout.extend({

        className: 'widget-image modal fade hide',

        template: _.template(template),

        regions: {
            imageRegion: '.js-image-region',
            iconRegion: '.js-icon-region',
            uploadRegion: '.js-upload-region'
        },

        events: {
            'click .js-modal-tab-item a': 'switchTab'
        },

        initialize: function(options) {
            var app = this;

            this.setOptions(options);

            this.listenTo(NC, 'widget:image:select:finish', this.chooseImages);

            // 请求App的参数
            RS.setHandler('widget:image:app:options', function() {
                return app.options;
            });

            this.render();
        },

        setOptions: function(options) {
            options = options || {};

            this.options = _.extend({}, DEFAULTS_OPTIONS, options);

            if(this.options.onlyUpload) {
                this.options.tabActive = 'upload';
            }

            if(options.multiUpload === void 0) {
                this.options.multiUpload = this.options.multiChoose;
            }

            var size = +this.options.maxSize;
            if(size % 1024 === 0) {
                this.options.maxSizeText = (size / 1024) + ' MB';
            } else {
                this.options.maxSizeText = size + ' KB';
            }

            // 单位换算成 Byte
            this.options.maxSize = this.options.maxSize * 1024;
        },

        show: function() {
            this.$el.modal('show');

            this.cleanViews();

            this.renderTab();
            this.renderViews();
        },

        cleanViews: function() {
            this.imageView && this.imageView.clean();
            this.iconView && this.iconView.clean();
            this.uploadView && this.uploadView.clean();
        },

        renderViews: function() {
            if(!this.options.onlyUpload) {
                this.renderImageView();
                this.renderIconView();
            }
            this.renderUploadView();
        },

        renderImageView: function () {
            if(!this.imageView) {
                this.imageView = new ImageView();
            }
            this.imageRegion.show(this.imageView);
        },

        renderIconView: function () {
            if(!this.iconView) {
                this.iconView = new IconView();
            }
            this.iconRegion.show(this.iconView);
        },

        renderUploadView: function () {
            if(!this.uploadView) {
                this.uploadView = new UploadView();
            }
            this.uploadRegion.show(this.uploadView);
        },

        renderTab: function() {
            if(this.options.onlyUpload) {
                this.$('.js-modal-tab-item').addClass('hide');
                this.$('.js-modal-tab-upload').removeClass('hide');
            } else {
                this.$('.js-modal-tab-item').removeClass('hide');
            }

            var tabName = this.options.tabActive.toLowerCase();

            this._switchTab(tabName);
        },

        switchTab: function(e) {
            var $target = $(e.currentTarget),
                tabName = $target.data('pane');

            this._switchTab(tabName);
        },

        _switchTab: function(tabName) {
            this.$('.js-modal-tab-item').removeClass('active');
            this.$('.js-modal-tab-' + tabName).addClass('active');

            this.$('.js-tab-pane').addClass('hide');
            this.$('.js-tab-pane-' + tabName).removeClass('hide');
        },

        chooseImages: function(images) {
            this.options.callback(images);
            this.$el.modal('hide');
        }

    });
});
